<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts测试</title>
    <script type="text/javascript" src="../static/echarts.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<style>
    #main {
        margin: auto auto;
    }
</style>

<body>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" d = "{{uuid}}" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">

    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom);

    const upColor = '#ec0000';
    const upBorderColor = '#8A0000';
    const downColor = '#00da3c';
    const downBorderColor = '#008F28';

    // Each item: open，close，lowest，highest
    var responseData;
    var d=[]

    //小数转百分比的函数
    function toPercent(point){
            if (point==0) {
                return 0;
            }
            var str=Number(point*100).toFixed(2);
            str+="%";
            return str;
        }

    uuid = document.getElementById('main').getAttribute('d');
    $.ajax({
        url: '/api/deal_data',
        data: {'uuid':uuid},
        type: 'GET',
        async: false,          //同步
        success: function (data) {
            responseData = data['data_list']
        }
    });

    const data0 = splitData(
        //     [['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94]],
        responseData
    );
    function splitData(rawData) {
        const categoryData = [];
        const values = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            // console.log(rawData[i][7])
            if(rawData[i][7] === 1.0){
            d.push(
                {
                            name: 'Mark',
                            coord: [categoryData[i], rawData[i][8]],
                            value: '买'+' \n '+toPercent(rawData[i][9]),
                            itemStyle: {
                                color: 'rgb(255,48,48)'
                            }
                },
                {
                    name: 'Mark',
                            coord: [rawData[i][10], rawData[i][11]],
                            value: '平',
                            itemStyle: {
                                color: 'rgb(255,236,139)'
                            }
                }
            )
        }if(rawData[i][7] === -1.0){
                d.push(
                {
                            name: 'Mark',
                            coord: [categoryData[i], rawData[i][8]],
                            value: '卖'+' \n '+toPercent(rawData[i][9]),
                            itemStyle: {
                                color: 'rgb(41,60,85)'
                            }
                },
                    {
                    name: 'Mark',
                            coord: [rawData[i][10], rawData[i][11]],
                            value: '平',
                            itemStyle: {
                                color: 'rgb(255,236,139)'
                            }
                }
            )
            }
        }
        return {
            categoryData: categoryData,
            values: values,
        };
    }


    function calculateMA(dayCount) {
        if (dayCount === 'median') {
            var median_result = [];
            for (var i = 0, len = data0.values.length; i < len; i++) {

                median_result.push(data0.values[i][4])

            }
            return median_result;
        }
        if (dayCount === 'upper') {
            var upper_result = [];
            for (var i = 0, len = data0.values.length; i < len; i++) {
                // if (i < len) {
                upper_result.push(data0.values[i][5])
            }
            return upper_result
        }
        if (dayCount === 'lower') {
            var lower_result = [];
            for (var i = 0, len = data0.values.length; i < len; i++) {
                // if (i < len) {
                lower_result.push(data0.values[i][6])
            }
            return lower_result
        }
    }


    option = {
        title: {
            text: '交易',
            left: 0
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: ['日K', '中轨', '上轨', '下轨']
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: data0.categoryData,
            scale: true,
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: false},
            min: 'dataMin',
            max: 'dataMax'
        },
        yAxis: {
            scale: true,
            splitArea: {
                show: true
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 50,
                end: 100
            },
            {
                show: true,
                type: 'slider',
                top: '90%',
                start: 50,
                end: 100
            }
        ],
        series: [
            {
                name: '日K',
                type: 'candlestick',
                data: data0.values,
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                },
                markPoint: {
                    label: {
                        formatter: function (param) {
                            return param != null ? param.value + '' : '';
                        }
                    },
                    data: d,

                    tooltip: {
                        formatter: function (param) {
                            return param.name + '<br>' + (param.data.coord || '');
                        }
                    }
                },
            },
            {
                name: '中轨',
                type: 'line',
                data: calculateMA('median'),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: '上轨',
                type: 'line',
                data: calculateMA('upper'),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: '下轨',
                type: 'line',
                data: calculateMA('lower'),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
        ]
    };

    option && myChart.setOption(option);

</script>